<template>
  <div class="order">
    <nav-banner>
      <i class="el-icon-s-order"></i>
      我的订单
    </nav-banner>
    <div
      class="order-container"
      v-loading="loading"
      element-loading-text="加载中..."
    >
      <div class="nav-bar">
        <el-tabs v-model="activeState" @tab-click="handleTabClick">
          <el-tab-pane label="全部订单" name="null"></el-tab-pane>
          <el-tab-pane label="待支付" name="0"></el-tab-pane>
          <el-tab-pane label="未发货" name="1"></el-tab-pane>
          <el-tab-pane label="已发货" name="2"></el-tab-pane>
          <el-tab-pane label="待评价" name="3"></el-tab-pane>
          <el-tab-pane label="已完成" name="4"></el-tab-pane>
          <el-tab-pane label="已取消" name="-1"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="order-content" v-if="orders.length > 0">
        <div
          class="content"
          v-for="(item, index) in orders"
          :key="'order' + index"
        >
          <ul>
            <li class="order-info">
              <div class="order-info-item">
                订单状态：
                <span class="order-state">{{
                  renderOrderState(item.orderState)
                }}</span>
              </div>
              <div class="order-info-item between">
                <div>
                  订单编号:
                  <span class="order-id">{{ item.orderSeries }}</span>
                </div>
                <div>
                  订单时间:
                  <span class="order-time">
                    {{ item.createTime }}
                  </span>
                </div>
              </div>
            </li>
            <li class="header">
              <div class="pro-img"></div>
              <div class="pro-name">商品名称</div>
              <div class="pro-price">单价</div>
              <div class="pro-num">数量</div>
              <div class="pro-total">小计</div>
            </li>
            <li
              class="product-list"
              v-for="product in item.products"
              :key="'prod' + product.id"
            >
              <div class="pro-img">
                <img :src="baseURL + prodThumbnail(product)" />
              </div>
              <div class="pro-name">
                {{ product.productName }}
              </div>
              <div class="pro-price">{{ product.dealPrice }}元</div>
              <div class="pro-num">{{ product.dealTotal }}</div>
              <div class="pro-total pro-total-in">
                {{ product.dealPrice * product.dealTotal }}元
              </div>
            </li>
          </ul>
          <div class="order-bar">
            <div>
              <el-button
                v-show="showOrderOpt(item)"
                class="btn-operate"
                size="mini"
                :type="renderOrderStyle(item.orderState)"
                @click="handleClick(item)"
                >{{ renderOrderAction(item.orderState) }}</el-button
              >
              <span class="order-total">
                共
                <span class="order-total-num">{{ summarizeTotal(item) }}</span>
                件商品
              </span>
            </div>
            <div>
              <span class="total-price-title">合计：</span>
              <span class="total-price">{{ summarizePrice(item) }}元</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="order-empty">
        <div class="empty-img">
          <img src="@/assets/imgs/cart-empty.png" alt="订单列表还是空的" />
        </div>
        <div class="empty-desc">
          <h2>当前列表还是空的！</h2>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { orderApi } from "@/api";
import {
  baseURL,
  renderOrderState,
  renderOrderAction,
  renderOrderStyle,
  orderState
} from "@/config";
export default {
  data() {
    return {
      baseURL,
      orders: [],
      total: [],
      loading: false,
      activeState: "null",
      lastTab: "null",
      lastSearch: ""
    };
  },
  setup() {
    return {
      renderOrderStyle,
      renderOrderState,
      renderOrderAction
    };
  },
  mounted() {
    this.setListeners();
    this.getOrderList();
  },
  methods: {
    setListeners() {
      this.$bus.$on("search-order", args => {
        if (args === this.lastSearch) {
          return;
        }
        this.lastSearch = args;
        this.getOrderList();
      });
    },
    showOrderOpt(order) {
      return (
        order.orderState !== orderState.canceled &&
        order.orderState !== orderState.finished
      );
    },
    handleTabClick(tab) {
      if (this.lastTab === tab.name) {
        return;
      }
      this.getOrderList();
      this.lastTab = tab.name;
    },
    async getOrderList() {
      try {
        this.loading = true;
        // this.orders = [];
        let resp = await orderApi.getOrders({
          orderState: this.activeState === "null" ? null : this.activeState,
          search: this.lastSearch
        });
        this.loading = false;
        if (resp && resp.code == 0) {
          this.orders = resp.data
            .map(x => {
              return {
                ...x,
                orderSeries: x.orderSeries.replace(/^\d+-/, "")
              };
            })
            .filter(x => {
              return Array.isArray(x.products) && x.products.length > 0;
            });
        }
      } catch {
        this.loading = false;
      }
    },
    prodThumbnail(prod) {
      return Array.isArray(prod.imgs) && prod.imgs.length >= 1
        ? prod.imgs[0]
        : null;
    },
    summarizeTotal(order) {
      return !Array.isArray(order.products)
        ? 0
        : order.products.reduce((total, cur) => {
            return (total += cur.dealTotal);
          }, 0);
    },
    summarizePrice(order) {
      return !Array.isArray(order.products)
        ? 0
        : order.products.reduce((totalPrice, cur) => {
            return (totalPrice += cur.dealPrice * cur.dealTotal);
          }, 0);
    },
    handleClick(order) {
      var state = order.orderState;
      switch (state) {
        case 0:
          this.handleSettle(order);
          break;
        case 1:
          this.handleCancel(order);
          break;
        case 2:
          this.handleConfirm(order);
          break;
        case 3:
          this.handleComment(order);
          break;
      }
    },
    handleSettle(order) {
      this.$router.push({
        name: "Settle",
        query: {
          orderId: order.id
        }
      });
    },
    handleCancel(order) {
      this.$confirm({
        title: "提示",
        message: "确定要取消当前的订单吗?",
        confirmed: async () => {
          let resp = await orderApi.cancelOrder({
            orderId: order.id
          });
          if (resp && resp.code == 0) {
            this.$message.success(
              "取消订单成功，货款将会退还到您的支付账号中!"
            );
            this.getOrderList();
          }
        }
      });
    },
    handleConfirm(order) {
      this.$confirm({
        title: "提示",
        message: "确定要确认收货吗?",
        confirmed: async () => {
          let resp = await orderApi.confirmOrder({
            orderId: order.id
          });
          if (resp && resp.code == 0) {
            this.$message.success("操作成功!");
            this.getOrderList();
          }
        }
      });
    },
    handleComment(order) {
      this.$router.push({
        name: "Comment",
        query: {
          orderId: order.id
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.order {
  background-color: #f5f5f5;
  padding-bottom: 20px;

  &-container {
    width: $containerWidth;
    margin: 0px auto;
    background-color: white;
  }

  .nav-bar {
    padding: 10px;
  }

  .order-empty {
    width: 1225px;
    margin: 0 auto;
    height: 400px;
    display: flex;
    align-items: center;

    .empty-img {
      flex: 1;
      text-align: center;
    }

    .empty-desc {
      flex: 1;
      color: #b0b0b0;
      overflow: hidden;
      h2 {
        margin: 70px 0 15px;
        font-size: 36px;
      }
      p {
        margin: 0 0 20px;
        font-size: 20px;
      }
    }
  }

  .content {
    width: 1225px;
    margin: 0 auto;
    background-color: #fff;
    margin-bottom: 50px;
    overflow: auto;

    @at-root .order-info {
      display: flex;
      color: #424242;
      border-bottom: 1px solid $themeColor;
      padding: 0 20px;
      flex-direction: column;
      &-item {
        // width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        &.right {
          justify-content: flex-end;
        }
        &.between {
          justify-content: space-between;
        }
      }

      @at-root .order-state {
        margin-right: 20px;
      }

      @at-root .order-id {
        color: $themeColor;
      }

      @at-root .order-time {
        color: $themeColor;
        margin-left: 10px;
      }
    }

    ul {
      background-color: #fff;
      color: #424242;
      .header {
        height: 85px;
        display: flex;
        color: #424242;
        align-items: center;
      }

      .product-list {
        height: 85px;
        padding: 15px 0;
        display: flex;
        align-items: center;
        border-top: 1px solid #e0e0e0;
      }

      .pro-img {
        height: 85px;
        width: 120px;
        text-align: center;
        margin-right: 20px;
        img {
          height: 80px;
          width: 80px;
        }
      }

      .pro-name {
        flex: 1;
        a {
          color: #424242;
          &:hover {
            color: $themeColor;
          }
        }
      }

      .pro-price {
        width: 160px;
        text-align: center;
      }

      .pro-num {
        width: 100px;
        text-align: center;
      }

      .pro-total {
        width: 160px;
        text-align: center;
      }

      .pro-operation {
        width: 160px;
        text-align: center;
      }

      .pro-state {
        width: 100px;
        text-align: center;
      }

      .pro-total-in {
        color: $themeColor;
      }

      @at-root .order-bar {
        width: 1185px;
        padding: 0 20px;
        border-top: 1px solid $themeColor;
        height: 50px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .btn-operate {
          margin-right: 20px;
        }

        .order-total {
          color: #757575;
          &-num {
            color: $themeColor;
          }
        }
        .total-price-title {
          color: $themeColor;
          font-size: 14px;
        }
        .total-price {
          color: $themeColor;
          font-size: 30px;
        }
      }
    }
  }
}
</style>
